<template>
  <div id="msg-center">
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >
    <el-dialog
      title="消息中心"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <div v-if="flag" class="main">
        <!-- <div class="tag"></div> -->
        <ul class="ul1">
          <li
            v-for="(item1, index1) in msgs"
            :key="item1.index1"
            :class="currentIndex1 === index1 ? 'active' : ''"
            @click="handle1(index1)"
          >
            <span class="msg">{{ item1.msg }}</span>
            <span class="num">{{ item1.num }}</span>
          </li>
          <div class="btns">
            <el-button type="primary" size="mini" plain>全部已读</el-button>
            <el-button type="primary" size="mini" plain @click="flag = false"
              >消息订阅</el-button
            >
          </div>
        </ul>
        <ul
          v-for="(item1, index1) in msgs"
          :key="item1.index1"
          :class="currentIndex1 === index1 ? 'content' : 'none'"
        >
          <li
            v-for="(item2, index2) in item1.content"
            :key="item2.index2"
            :class="currentIndex2 === index2 ? 'active' : ''"
            @click="handle2(index2)"
          >
            <span class="msg">{{ item2.msg }}</span>
            <span class="num">{{ item2.num }}</span>
          </li>
        </ul>
        <el-collapse
          accordion
          v-for="(item2, index2) in msgs[currentIndex1].content"
          :key="item2.index2"
          :class="currentIndex2 === index2 ? 'content' : 'none'"
        >
          <el-collapse-item v-for="(item3, index3) in item2.info" :key="index3">
            <template slot="title">
              <li>{{ item3.title }}</li>
              <span>{{ item3.date }}</span>
            </template>
            <div>
              <img :src="item3.image" alt="" />
            </div>
            <div>
              <p>{{ item3.title }}</p>
              <div>
                <span>数量：{{ item3.num }}件</span>
                <span>买家昵称：{{ item3.name }}</span>
              </div>
              <p>订单号：{{ item3.orderNum }}</p>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div v-else class="book">
        <ul class="ul1">
          <li
            v-for="(item1, index1) in books"
            :key="item1.index1"
            :class="currentIndex1 === index1 ? 'active active1' : ''"
            @click="handle1(index1)"
          >
            <span class="msg">{{ item1.msg }}({{ item1.num }})</span>
          </li>
        </ul>
        <div class="book-main">
          <ul
            v-for="(item1, index1) in books"
            :key="item1.index1"
            :class="currentIndex1 === index1 ? 'content' : 'none'"
          >
            <li
              v-for="(item2, index2) in item1.content"
              :key="item2.index2"
              :class="currentIndex2 === index2 ? 'active' : ''"
              @click="handle2(index2)"
            >
              <span class="msg">{{ item2.msg }}</span>
              <span class="num">{{ item2.num }}</span>
            </li>
            <div class="btns">
              <el-button type="primary" size="mini" plain @click="flag = true"
                >返回</el-button
              >
            </div>
          </ul>
          <div>1</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      currentIndex1: 0,
      currentIndex2: 0,
      msgs: [
        {
          msg: '交易消息',
          num: 86,
          content: [
            {
              msg: '新订单',
              num: 86,
              info: [
                {
                  title:
                    '饺子盒冻饺子多层冰箱速冻水饺家用鸡蛋保鲜盒托盘冷冻...',
                  date: '2020-07-01 12:00',
                  image: '',
                  num: 1,
                  name: '茶茶',
                  orderNum: '12687854826'
                }
              ]
            },
            {
              msg: '买家已付款',
              num: 86,
              info: [
                {
                  title:
                    '饺子盒冻饺子多层冰箱速冻水饺家用鸡蛋保鲜盒托盘冷冻...',
                  date: '2020-07-01 12:00',
                  image: '',
                  num: 2,
                  name: '茶茶',
                  orderNum: '12687854826'
                }
              ]
            },
            {
              msg: '订单完成',
              num: 86,
              info: [
                {
                  title:
                    '饺子盒冻饺子多层冰箱速冻水饺家用鸡蛋保鲜盒托盘冷冻...',
                  date: '2020-07-01 12:00',
                  image: '',
                  num: 1,
                  name: '茶茶',
                  orderNum: '12687854826'
                }
              ]
            },
            {
              msg: '订单地址修改',
              num: 86,
              info: [
                {
                  title:
                    '饺子盒冻饺子多层冰箱速冻水饺家用鸡蛋保鲜盒托盘冷冻...',
                  date: '2020-07-01 12:00',
                  image: '',
                  num: 1,
                  name: '茶茶',
                  orderNum: '12687854826'
                }
              ]
            },
            {
              msg: '订单备注修改',
              num: 86,
              info: [
                {
                  title:
                    '饺子盒冻饺子多层冰箱速冻水饺家用鸡蛋保鲜盒托盘冷冻...',
                  date: '2020-07-01 12:00',
                  image: '',
                  num: 1,
                  name: '茶茶',
                  orderNum: '12687854826'
                }
              ]
            }
          ]
        },
        {
          msg: '商品消息',
          num: 86,
          content: [
            {
              id: 11,
              msg: '商品下架',
              num: 86,
              info: [
                {
                  id: 116,
                  title:
                    '饺子盒冻饺子多层冰箱速冻水饺家用鸡蛋保鲜盒托盘冷冻...',
                  date: '2020-07-01 12:00',
                  image: '',
                  num: 1,
                  name: '茶茶',
                  orderNum: '12687854826'
                }
              ]
            },
            {
              msg: '商品删除',
              num: 86,
              info: [
                {
                  title:
                    '饺子盒冻饺子多层冰箱速冻水饺家用鸡蛋保鲜盒托盘冷冻...',
                  date: '2020-07-01 12:00',
                  image: '',
                  nume: 1,
                  name: '茶茶',
                  orderNum: '12687854826'
                }
              ]
            },
            {
              msg: '商品无货提醒',
              num: 86,
              info: [
                {
                  title:
                    '饺子盒冻饺子多层冰箱速冻水饺家用鸡蛋保鲜盒托盘冷冻...',
                  date: '2020-07-01 12:00',
                  image: '',
                  nume: 1,
                  name: '茶茶',
                  orderNum: '12687854826'
                }
              ]
            }
          ]
        },
        {
          msg: '营销活动',
          num: 86,
          content: [
            {
              msg: '营销活动报名',
              num: 86,
              info: [
                {
                  title:
                    '饺子盒冻饺子多层冰箱速冻水饺家用鸡蛋保鲜盒托盘冷冻...',
                  date: '2020-07-01 12:00',
                  image: '',
                  num: 1,
                  name: '茶茶',
                  orderNum: '12687854826'
                }
              ]
            },
            {
              msg: '营销活动催报',
              num: 86,
              info: [
                {
                  title:
                    '饺子盒冻饺子多层冰箱速冻水饺家用鸡蛋保鲜盒托盘冷冻...',
                  date: '2020-07-01 12:00',
                  image: '',
                  num: 1,
                  name: '茶茶',
                  orderNum: '12687854826'
                }
              ]
            },
            {
              msg: '营销活动邀请',
              num: 86,
              info: [
                {
                  title:
                    '饺子盒冻饺子多层冰箱速冻水饺家用鸡蛋保鲜盒托盘冷冻...',
                  date: '2020-07-01 12:00',
                  image: '',
                  num: 1,
                  name: '茶茶',
                  orderNum: '12687854826'
                }
              ]
            },
            {
              msg: '营销活动审核通过',
              num: 86,
              info: [
                {
                  title:
                    '饺子盒冻饺子多层冰箱速冻水饺家用鸡蛋保鲜盒托盘冷冻...',
                  date: '2020-07-01 12:00',
                  image: '',
                  num: 1,
                  name: '茶茶',
                  orderNum: '12687854826'
                }
              ]
            },
            {
              msg: '营销活动审核驳回',
              num: 86,
              info: [
                {
                  title:
                    '饺子盒冻饺子多层冰箱速冻水饺家用鸡蛋保鲜盒托盘冷冻...',
                  date: '2020-07-01 12:00',
                  image: '',
                  num: 1,
                  name: '茶茶',
                  orderNum: '12687854826'
                }
              ]
            }
          ]
        }
      ],
      books: [
        {
          msg: '已订阅',
          num: 2,
          content: [
            {
              msg: '交易消息',
              num: 86,
              info: []
            },
            {
              msg: '商品消息',
              num: 86,
              info: []
            }
          ]
        },
        {
          msg: '未订阅',
          num: 1,
          content: [
            {
              msg: '营销活动',
              num: 86,
              info: []
            }
          ]
        }
      ],
      flag: true
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        // .catch(_ => {})
    },
    handle1(index1) {
      this.currentIndex1 = index1
      this.currentIndex2 = 0
    },
    handle2(index2) {
      this.currentIndex2 = index2
    }
  }
}
</script>

<style lang="less" scoped>
@activeColor: red;
@comColor: skyblue;
// @import '../../assets/css/base.less';
#msg-center {
  /deep/ .el-dialog {
    width: 1192px;
    height: 640px;
    background-color: #ffffff;
    border-radius: 10px;
    .el-dialog__header {
      height: 71px;
      font-size: 16px;
      font-weight: bold;
      font-stretch: normal;
      line-height: 23px;
      letter-spacing: 1px;
      color: #333333;
      padding: 31px 30px 22px;
      border-bottom: 1px solid #e5e5e5;
    }
    .el-dialog__body {
      padding: 0;
    }
    /deep/ .el-collapse {
      width: 790px;
    }
  }
  .main {
    height: 569px;
    display: flex;
    // .tag {
    //   width: 201px;
    //   border-right: 1px solid #e5e5e5;
    // }
    .ul1 {
      position: relative;
    }
  }
  .book {
    width: 100%;
    height: 569px;
    .ul1 {
      width: 100%;
      border-bottom: 1px solid #e5e5e5;
      display: flex;
      justify-content: center;
      li {
        margin-right: 50px;
      }
      .active1 {
        border-bottom: 2px solid @activeColor;
      }
    }
    ul {
      position: relative;
    }
    .book-main {
      height: 513px;
      display: flex;
    }
  }
  ul {
    width: 201px;
    border-right: 1px solid #e5e5e5;
    li {
      padding: 15px 14px 15px 32px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .msg {
        height: 23px;
        font-size: 14px;
        line-height: 23px;
        letter-spacing: 1px;
        color: @comColor;
      }
      .num {
        width: 30px;
        height: 16px;
        border-radius: 8px;
        color: #fff;
        background-color: @activeColor;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
      }
      :hover {
        color: @activeColor;
      }
    }
  }
  .btns {
    bottom: 20px;
    left: 32px;
    width: 136px;
    display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    /deep/ .el-button {
      width: 136px;
      margin-bottom: 12px;
    }
  }
  .active {
    background-color: #fdf9f3;
  }
  .content {
    display: block;
  }
  .none {
    display: none;
  }
}
</style>
